<template>
  <div class="skeleton-wrapper">
    <div class="ms-skeleton" v-if="!isLoading" :class="{active: active}">
      <div v-if="avatar" class="ms-skeleton-avatar" >
        <span />
      </div>
      <div class="ms-skeleton-content">
        <h3 class="ms-skeleton-title" />
        <ul class="ms-skeleton-paragraph">
          <li v-for="(item, index) of paragraph" :key="index" />
          <li style="width: 60%;" />
        </ul>
      </div>
    </div>
    <slot v-else></slot>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false
    },
    paragraph: {
      type: Number,
      default: 2
    },
    avatar: {
      type: Boolean,
      default: false
    },
    isLoading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="stylus" scope>
@import '~./style.stylus'
</style>
